<template>
  <div class="task-content" v-if="introduce" ref="desc">
    <div :class="[exchangeButton?'task-content-text':'']">
      <strong style="color: #576b95;margin-right: .2rem;font-weight: 400;" v-if="strongLabel">{{strongLabel}}:</strong>
      <font v-html="introduce"></font>
      <!-- <span v-if="!exchangeButton"> -->
        <!-- <font style="color: #288ef4;" v-if="a"> {{GetDept}}</font> -->
        <!-- <font style="color: #288ef4;" v-if="!a"> @{{isPublic == 0 ? '自己':'全体员工'}}</font> -->
      <!-- </span> -->
    </div>
    <p v-if="exchangeButton" @click="onShow">展开</p>
  </div>
</template>

<script>
/**
 * 任务卡组件
 * 传入数据 t
 * {
        styleType: "task"=任务列表中文本, “comment”=留言板中文本
        t: "String", 文本内容
        a: "String", 需要@的名字
        strongLabel: 强化文本头
    }
 */
import maps from "@/util/maps";
export default {
  name: "MyContext2",
  props: {
    t: String,
    a: String,
    isPublic: Number,
    styleType: String,
    strongLabel: String
  },
  components: {},
  data() {
    return {
      GetDept: "",
      type: "",
      introduce: "",
      // 是否展示所有文本内容
      showTotal: true,
      // 显示展开还是收起
      exchangeButton: false,
      rem: ""
    };
  },
  mounted() {
    this.introduce = this.t;
    this.type = this.styleType || "task";
    this.strongText = this.strongLabel || "";
    if (this.a) {
      maps.getTargetDeptIds(this.a).then(e => {
        this.GetDept = e;
      });
    }
  },
  methods: {
    onShow(){
      this.exchangeButton = false;
    },
    showTotalIntro() {
      //console.log(this.showTotal);
      this.showTotal = !this.showTotal;
      this.exchangeButton = !this.exchangeButton;
    },
    getRem() {
      const defaultRem = 16;
      let winWidth = window.innerWidth;
      //console.log("winWidth:" + winWidth);
      let rem = (winWidth / 375) * defaultRem;
      return rem;
    }
  },
  watch: {
    introduce: function() {
      this.$nextTick(
        function() {
          //console.log("nextTick");
          // 判断介绍是否超过四行
          let rem = parseFloat(this.getRem());
            console.log("desc null:",rem);
          if (!this.$refs.desc) {
            return;
          }
          let descHeight = window.getComputedStyle(this.$refs.desc)
            .height.replace("px", "");
          console.log("descHeight:" + descHeight);
          //console.log("如果 descHeight 超过" + 1.25 * rem + "就要显示展开按钮");
          if (descHeight > 5.5 * rem) {
            console.log("超过了四行");
            // 显示展开收起按钮
            this.exchangeButton = true;
          } else {
            // 不显示展开收起按钮
            this.showExchangeButton = false;
            console.log("showExchangeButton", this.showExchangeButton);
            // //console.log("showTotal", this.showTotal);
          }
        }.bind(this)
      );
    }
  }
};
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped lang="less" >
@zi : 30px;
.task-content {
  padding: 20px 0;
  font-size: @zi;
  text-align: left;
  line-height: 42px;
  color: #000;
  &-text {
    font-size: @zi;
    text-align: left;
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 4;
    -webkit-box-orient: vertical;
  }
  p{
    text-align: right;
    color: #576B95;
    font-size: 30px;
    font-weight: 400;
  }
}
</style>
